<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            padding: 10px;
            background: #f1f1f1;
        }

        .header {
            padding: 30px;
            text-align: center;
            background: white;
        }

        .nav {
            overflow: hidden;
            background: #333;
        }

        .nav a {
            float: left;
            color: #f3f3f3;
            text-align: center;
            padding: 15px 15px;
            text-decoration: none;
        }

        .left {
            float: left;
            width: 70%;
        }

        .right {
            float: left;
            width: 30%;
            padding-left: 20px;
        }

        .Img {
            width: 100%;
            background: #666;
            padding: 20px;
        }

        .card {
            background: #FFF;
            padding: 20px;
            margin-top: 20px;
        }

        .content::after {
            content: "";
            display: table;
            clear: both;
        }

        .footer {
            padding: 20px;
            text-align: center;
            background: #fff;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <!-- 头 --->
    <div class="header">
        <h1>我的网页</h1>
    </div>
    <!-- 导航 --->
    <div class="nav">
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
    </div>
    <!-- 内容 --->
    <div class="content">
        <div class="left">
            <div class="card">
                <h2>标题</h2>
                <h6>2024年09月25日</h6>
                <div class="Img">图片</div>
                <p>文本</p>
                <p>HTML+CSS</p>
                <p>HTML+CSS</p>
            </div>
            <div class="card">
                <h2>标题</h2>
                <h6>2024年09月25日</h6>
                <div class="Img">图片</div>
                <p>文本</p>
                <p>HTML+CSS</p>
                <p>HTML+CSS</p>
            </div>
        </div>
        <div class="right">
            <div class="card">
                <h2>关于我</h2>
                <div class="Img">图片</div>
                <p>关于我的一些信息</p>
            </div>
            <div class="card">
                <h2>热门文章</h2>
                <div class="Img">图片</div>
                <div class="Img">图片</div>
                <div class="Img">图片</div>
            </div>
            <div class="card">
                <h2>关注我</h2>
                <p>一段文本...</p>
            </div>
        </div>
    </div>
    <!-- 脚 --->
    <div class="footer">
        <h2>底部区域</h2>
    </div>
</body>

</html>